import { useState, useEffect } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'
import NavBar from './NavBar.jsx'

import { Layout, theme ,Modal, Form, Input, Button } from 'antd';
const { Header, Content, Footer } = Layout;

import Hall from './Hall.jsx'
import Room from './Room.jsx'
import { randomUUID } from './Util.jsx'

// React Router: https://reactrouter.com/en/6.25.1/start/tutorial

import {
  createBrowserRouter,
  createHashRouter,
  RouterProvider,
  Navigate,
  HashRouter,
  Routes,
  Route,
  Outlet
} from "react-router-dom";

const router = createHashRouter([
  {
    element: <HeaderLayout/>,
    children: [
    {
      path: "/",
      element: <Hall />,
    },
    {
      path: "/room/:id",
      element: <Room />,
    }
  ]}
]);


function HeaderLayout() {

  const [user, setUser] = useState()
  const [isLoginModalOpen, setIsLoginModalOpen] = useState(false);

  useEffect(()=> {
    let info = localStorage.getItem('card_player')
    let userInfo = JSON.parse(info)
    console.log("App: LocalStorage: setUser", userInfo)
    setUser(userInfo)

    if (!userInfo){
      console.log("UserInfo", userInfo)
      setIsLoginModalOpen(true)
    }
  }, [])

  const onLogin = (userInfo) =>{
    console.log("App: onLogin", userInfo)
    setIsLoginModalOpen(false)

    console.log("App: onLogin: setUser", userInfo)
    setUser(userInfo)
    localStorage.setItem('card_player', JSON.stringify(userInfo))
  }


  const onLoginOk = (param)=>{
    console.log("onLoginOk", param)
    let userInfo = {
      username: param.username,
      id: randomUUID()
    }
    console.log("onLogin", param, userInfo)
    onLogin(userInfo)
  }
  
  const onLoginFail = (param)=>{
    console.log("onLoginFail", param)
  }



  return (
    <>
    <Layout>
      <Header
        style={{
          display: 'flex',
          alignItems: 'center',
        }}
      >
        <NavBar user={user} />
      </Header>
      <Content>
        <Outlet />
      </Content>
    </Layout>



    <Modal title="Login" open={isLoginModalOpen} closable={false} footer={null}>
        <Form
          name="basic"
          labelCol={{
            span: 8,
          }}
          wrapperCol={{
            span: 16,
          }}
          style={{
            maxWidth: 600,
          }}
          initialValues={{
            remember: true,
          }}
          onFinish={onLoginOk}
          onFinishFailed={onLoginFail}
          autoComplete="off"
        >
          <Form.Item
            label="Username"
            name="username"
            rules={[
              {
                required: true,
                message: 'Please input your username!',
              },
            ]}
          >
            <Input />
          </Form.Item>

          <Form.Item
            wrapperCol={{
              offset: 8,
              span: 16,
            }}
          >
            <Button type="primary" htmlType="submit">
              Login
            </Button>
          </Form.Item>
        </Form>

    </Modal>

    </>
  )
}


function App() {
  return (
    <HashRouter>
    <Routes>
      <Route element={<HeaderLayout/>}>
        <Route path="/"  element={<Hall/>} />
        <Route path="/room/:roomId"  element={<Room />}/>
      </Route>
    </Routes>
    </HashRouter>
  )
}


export default App
